<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="输入车牌信息" @clickLeft="clickLeft()"></uni-nav-bar>
		<view class="tui-row">
			<view class="i-flex row-tab">
				<view class="tui-flex1">行驶城市</view>
				<view class="i-flex">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<input class="input" disabled type="text" v-model="addressData.city" placeholder="请选择" placeholder-class="placeholder" />
					</picker>
					<uni-icons type="arrowright" color="#999" size="36"></uni-icons>
				</view>
			</view>
			<view class="i-flex row-tab">
				<view class="tui-flex1">车牌号码</view>
				<view class="i-flex">
					<picker @change="plateChange" :value="index" :range="plateArr" class="tui-pd-right">
						<div class="i-flex">
							<text>{{addressData.jane}}</text>
							<uni-icons type="arrowdown" color="#333" size="36"></uni-icons>
						</div>
					</picker>
					<input class="input" type="text" v-model="addressData.card" placeholder="请输入车牌号" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<view class="tui-btn">
			<button class="button" type="default" @tap="farego()">下一步</button>
		</view>

	</view>
</template>

<script>
	
	export default {
		name: 'parkingFee',
		components: {
		},
		data() {
			return {
                index: 0,
				codes: '',
                plateNo: '',
				flag: '',
                array: ['江西', '上海', '广东', '北京', '天津', '重庆', '河北', '河南', '浙江', '江苏', '福建'],
                plateArr: ['赣', '沪', '粤', '京', '津','渝','冀','豫','浙','苏','闽'],
                addressData: {
                    city: '',
                    jane: '',
                    card: '',
                    checkedVal: '',
                    phone: ''
                },
			}
		},
		onLoad(options) {
			this.flag = options.flag
		},
		methods: {
			farego() {
				var str = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/; 
				this.plateNo = this.addressData.jane + this.addressData.card
				console.log(this.plateNo)
				if(!str.test(this.plateNo)){
					uni.showToast({
						title: '请输入正确车牌号',
						icon: "none"
					})
				} else {
					if(this.flag == 1) {
						uni.navigateTo({
							url: '/pagesA/OCRparking/OCRparking?fareCode=' + 'WJD66274'
						})
					} else {
						uni.navigateTo({
							url: '/pagesA/parkingFee/components/farepay?fareCode=' + 'WJD66274'
						})
					}
					
				}
			},
            immediately() {
            },
            bindPickerChange (e, type) {
                let index = e.target.value
                this.addressData.city = this.array[index]
                this.addressData.jane = this.plateArr[index]
            },
            plateChange(e, type) {
                let index = e.target.value
                this.addressData.jane = this.plateArr[index]
                this.addressData.city = this.array[index]
            },
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.i-flex {
		display: flex;
		align-items: center;
	}
	.tui-row {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		.wap {
			padding: 30rpx;
			.tui-images{
				width: 460rpx;
				height: 330rpx;
				.image{
					border-radius: 15rpx;
					width: 100%;
					height: 100%;
				}
			}
		}

		.tui-flex1 {
			width: 35%;
		}

		.row-tab {
			padding: 20rpx;
			border-bottom: 2rpx solid #eee;
			&:last-child{
				border-bottom: 0;
			}
			.uni-list-cel {
				padding-right: 40rpx;
				/deep/ .uni-radio-input {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	.tui-btn{
		margin: 10% 0 0;
		.button{
			background-color: $uni-color-success;
			color: #fff;
		}
	}
</style>
